<!--
 Copyright (c) 2018
 Mainflux

 SPDX-License-Identifier: Apache-2.0
-->

<form [formGroup]="addChannelForm" (ngSubmit)="onAddChannel()">
    <h1 *ngIf="!editMode" mat-dialog-title>Add channel</h1>
    <h1 *ngIf="editMode" mat-dialog-title>Edit channel</h1>
    <div mat-dialog-content fxLayout="column">
      <input type="hidden" formControlName="id">
      <mat-form-field>
        <input matInput tabindex="1" placeholder="Name" formControlName="name" />
        <mat-error *ngIf="addChannelForm.get('name').errors?.required">
          Name is required
        </mat-error>
      </mat-form-field>
      <mat-form-field>
          <mat-select placeholder="Connected things" formControlName="connected" [compareWith]="compareFunction" multiple>
            <mat-option *ngFor="let thing of thingsStore.things" [value]="thing">{{thing.name}}</mat-option>
          </mat-select>
        </mat-form-field>
    </div>
    <div mat-dialog-actions>
      <button mat-button mat-dialog-close>Cancel</button>
      <button mat-button mat-raised-button color="primary" type="submit" [disabled]="addChannelForm.invalid">Ok</button>
    </div>
  </form>
